<template>
    <div class="home-cont">
        <div class="home-cont-title clearfix">
            <img src="../images/title1.png" class="img-left" alt="">
            <img src="../images/title.png" class="img-right" alt="">
        </div>

        <div class="home-slide">
            <div class="home-slide-ul clearfix" id="home-slide-ul" :style="{'transform': `translateY(-${ i*220 }px)`}">
                <div class="home-slide-li" v-for="(item, index) of arr" :key="index" @mouseenter="overFn(index)" @mouseleave="overOut(index)">
                    <div class="cur-home">
                        
                        <img :src="item.picture" alt="">
                        <div class="cur-home-cont">
                            <p class="title-slide">《 {{ item.name }} 》 </p>
                            <p class="title-cont-slide" v-if="item.topiccontent != ''">{{ item.topiccontent }}</p>
                        </div>
                    </div>
                    
                    <div class="home-slide-hover " :class="{ 'active' : !!item.state}">
                        <div class="home-slide-header clearfix" @click="routerLink(`/main/index?tsid=${item.tsid}`)">
                            <img :src="item.picture" alt="">
                            <i class="iconfont icon-bofang header-icon"></i>
                            <div class="home-slide-header-info">
                                <p>{{ item.name }}</p>
                                <p :title="item.content">{{ item.content.substr(0, 8)}}...</p>
                            </div>
                        </div>

                        <div class="home-slide-hover-list">
                            <div class="home-slide-hover-list-data" @click="routerLink(`/main/play?musicid=${items.musicid}`)" v-for="(items,zindex) of item.music" :key="zindex">
                                <i class="iconfont icon-bofang"></i>
                                <span>{{ items.name}}</span>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="zindex-radio">
            <ul>
                <li v-for="(item, index) in len" :key="index" :class="{ 'active': index === i}" @click="setIndex(index)"></li>
            </ul>
        </div>
    </div>
</template>
<script>
import {getResponse, getResponses} from "../api"
import {serialize, lazy, timeFormat} from "../utils"

export default {
    data() {
        return {
            arr:[],
            len:0,
            i:0
        }
    },

    methods:{
        overFn(index) {
            this.$set(this.arr[index], 'state', true)
        },

        overOut(index) {
            this.$set(this.arr[index], 'state', false)
        },

        setIndex(index) {
            this.i = index
        },

        routerLink(url){
            this.$router.push(url)
        },

        async getWorkList() {

            const data = await getResponses(`/fochina/query/topicsubjectmusic/json`, `tstype=1`)

            if(data.code === '0000') {
                this.arr = data.data
                this.juest()
            } else {
                console.log(data.error)
            }
        },


        juest() {
            let size = Math.floor(document.body.offsetWidth / 220)

            if( window.navigator.userAgent.indexOf('MSIE 9.0') > -1 && this.arr.length < size)  {
               

                document.getElementById('home-slide-ul').style.width = this.arr.length * 220 + 'px'
            }
        }
    },

    mounted() {
        this.getWorkList()
        this.len = Math.ceil(this.arr.length / Math.floor(document.documentElement.clientWidth/182))

        
    }
}
</script>

<style>

.zindex-radio {
    position: fixed;
    top:50%;
    right:20px;
    transform: translateY(-50%)
}

.zindex-radio ul li {
    width:10px;
    height: 10px;
    border-radius: 50%;
    margin-bottom:14px;
    background: #D3C5C0;
    border: 2px solid transparent;
    cursor:pointer;
}

.zindex-radio ul li.active {
    border: 2px solid #D3C5C0;
    background: transparent;
    box-shadow: 0 1px 3px 0 #D3C5C0;
}

.home-slide-hover-list {
    width:180px;
    height:138px;
    margin:12px 20px;
    box-sizing: border-box;
    color:#fff;
    line-height: 26px;
    overflow-y: auto;
}


.home-slide-hover-list::-webkit-scrollbar{
	width: 4px;
	background-color: #AB946C;
}

.home-slide-hover-list::-webkit-scrollbar-thumb
{
    background: #AB946C;
    border-radius: 100px;
}


.home-slide-hover-list-data {
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    cursor: pointer;
}

.home-slide-hover-list-data i {
    margin-right: 10px;
    font-size: 14px;
}

.home-slide-header {
    width:220px;
    height: 60px;
    padding:8px 14px;
    box-sizing: border-box;
    background: #CDB488;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
    position: relative
}

.home-slide-header .header-icon {
    position: absolute;
    left: 36px;
    top: 30px;
    font-size: 20px;
    color: #fff;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, -50%);
}

.home-slide-header  img {
    width:42px;
    height: 42px;
    border:1px solid #333;
    border-radius: 50%;
    float:left;
    margin-right: 8px;
}

.home-slide-header .home-slide-header-info p {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #5F4A25;
    float:left;
    line-height: 22px;
}

.home-slide-hover {
    width:220px;
    height: 220px;
    background: #AB946C;
    box-shadow: 0 2px 8px 6px rgba(82,24,5,0.30);
    border-radius: 4px;
    position: absolute;
    z-index: 2;
    left:-30px;
    top:-20px;
    opacity: 0;
    transform: scale(0.1);
}

.home-slide-hover.active {
    transform: scale(1);
    opacity: 1;
    animation: identifier .4s ease-in;

}

@keyframes identifier {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
    
}

.home-cont {
    background: url('../images/bj.jpg') no-repeat;
    background-size:100% auto;
    width:100%;
    height:100%;
}

.home-cont-title {
    padding:200px 0 0 160px;
}

.home-cont-title .img-left {
    width:90px;
    height: 72px;
    float:left;
    margin-right: 22px;
}

.home-cont-title .img-right {
    width:429px;
    height: 79px;
    float:left;
}

.home-slide {
    /* padding:0 42px; */
    margin:60px 0;
    width:100%;
    box-sizing: border-box;
    height: 220px;
    overflow: hidden;
}

.home-slide-ul {
    width:100%;
    height: 220px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transition: transform .4s ease-in;
    margin:0 auto;
}

.home-slide-li {
    width:160px;
    height: 180px;
    margin:20px 11px;
    position: relative;
    float:left;
}

.home-slide-li .cur-home img {
    width:160px;
    height: 120px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.home-slide-li .cur-home .cur-home-cont {
    width:160px;
    height: 60px;
    padding:10px 0;
    box-sizing: border-box;
    background: #AB946C;
    box-shadow: 0 2px 6px 4px rgba(82,24,5,0.20);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: center;
}

 .cur-home-cont .title-slide {
    font-size: 18px;
    color: #FFF;
 }

.cur-home-cont .title-cont-slide{
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
 }
</style>

